<template>
  <div class="app-container">
    <div class="display-flex">
      <div class="white-normal-box right-1" v-loading="loading1">
        <div class="normal-title">总数据</div>
        <div class="normal-tip mt20">总业绩</div>
        <div class="normal-num mt5">{{ (Number(totalEarn || 0)).toLocaleString() }}</div>
        <div class="normal-tip mt30">总支出</div>
        <div class="normal-num mt5">{{ (Number(totalExpenditure || 0)).toLocaleString() }}</div>
      </div>
      <div class="white-normal-box right-2 box-1" v-loading="loading2">
        <div class="box-3-1">
          <div class="normal-title">代理数据</div>
          <div class="box-line mt20">
            <div class="normal-tip">渠道总支出</div>
            <div class="normal-num mt5">{{ (Number(qudao || 0)).toLocaleString() }}</div>
          </div>
          <div class="box-line mt30">
            <div class="normal-tip">托管总支出</div>
            <div class="normal-num mt5">{{ (Number(tuoguan || 0)).toLocaleString() }}</div>
          </div>
        </div>
        <div class="box-3-2">
          <div class="title-box">
            <div class="normal-title">用户数据</div>
            <el-date-picker
              class="right-box"
              :clearable="false"
              @change="refreshSearch"
              v-model="dateTime"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div class="box-2">
            <div class="item-32">
              <div class="normal-tip mt20">推荐奖励总支出</div>
              <div class="normal-num mt5">{{ (Number(sumTuijian || 0)).toLocaleString() }}</div>
              <div class="normal-tip mt30">分红总支出</div>
              <div class="normal-num mt5">{{ (Number(sumFenhong || 0)).toLocaleString() }}</div>
            </div>
            <div class="item-32">
              <div class="normal-tip mt20">推荐云机总支出</div>
              <div class="normal-num mt5">{{ (Number(sumTuijianyj || 0)).toLocaleString() }}</div>
              <div class="normal-tip mt30">云机总支出</div>
              <div class="normal-num mt5">{{ (Number(sumYunji || 0)).toLocaleString() }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="white-normal-box box-middle">
      <div class="box-4 box-line" v-loading="loading3">
        <div class="normal-tip">云机总数</div>
        <div class="normal-num" style="margin-top: 14px;">{{ (Number(yjTotal || 0)).toLocaleString() }}</div>
      </div>
      <div class="box-5">
        <div class="chart-item" v-loading="loading4">
          <MiniChart color="#6FA1FF" :rat="getRat(yjOnLine || 0)" />
          <div class="msg-box">
            <div class="m-tip1">在线</div>
            <div class="m-num">{{ (Number(yjOnLine || 0)).toLocaleString() }}</div>
            <div class="m-tip2">占比 {{ getRat(yjOnLine || 0, true) }}%</div>
          </div>
        </div>
        <div class="chart-item" v-loading="loading5">
          <MiniChart color="#98E38A" :rat="getRat(yjReady || 0)" />
          <div class="msg-box">
            <div class="m-tip1">准备</div>
            <div class="m-num">{{ (Number(yjReady || 0)).toLocaleString() }}</div>
            <div class="m-tip2">占比 {{ getRat(yjReady || 0, true) }}%</div>
          </div>
        </div>
        <div class="chart-item" v-loading="loading6">
          <MiniChart color="#5D7092" :rat="getRat(yjOffLine || 0)" />
          <div class="msg-box">
            <div class="m-tip1">离线</div>
            <div class="m-num">{{ (Number(yjOffLine || 0)).toLocaleString() }}</div>
            <div class="m-tip2">占比 {{ getRat(yjOffLine || 0, true) }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="display-flex" style="margin-bottom: 0;">
      <div class="white-normal-box right-3" style="overflow: auto;" v-loading="loading7">
        <div class="chart-title">
          <div class="left-title">代理统计</div>
          <!-- <div class="right-icon"></div> -->
        </div>
        <blockChart ref="blockChart" />
      </div>
      <div class="white-normal-box right-2" style="overflow: auto;" v-loading="loading8">
        <div class="chart-title">
          <div class="left-title">订单统计</div>
          <!-- <div class="right-icon"></div> -->
        </div>
        <lineChart ref="lineChart" />
      </div>
    </div>
  </div>
</template>

<script>
  import MiniChart from "@/components/MiniChart/index.vue"
  import lineChart from "./components/indexCharts/lineChart.vue";
  import blockChart from "./components/indexCharts/blockChart.vue";

  import { queryMyYunJi, queryOnLineYunji, queryOffLineYunji, queryOffYunji, queryTotalPerformance, queryTotalExpenditure, queryUserLevelCount, queryOrderCount } from "@/api/home.js"
  export default {
    components: {
      MiniChart,
      lineChart,
      blockChart
    },
    data() {
      return {
        dateTime: [],
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false,
        loading6: false,
        loading7: false,
        loading8: false,
        // 总业绩
        totalEarn: 0,
        // 总支出
        qudao: 0,
        sumFenhong: 0,
        sumTuijian: 0,
        sumTuijianyj: 0,
        sumYunji: 0,
        totalExpenditure: 0,
        tuoguan: 0,
        // 云机数量
        yjTotal: 0,
        yjOnLine: 0,
        yjReady: 0,
        yjOffLine: 0,
      };
    },
    mounted() {
      this.getToday()
      this.getYunJiNum()
      this.getChartData()
    },
    methods: {
      getRat(now, isFour) {
        if (this.yjTotal && Number(this.yjTotal) > 0) {
          let num = Number(now)
          return num == 0 ? 0 : (isFour ? Number(Number(num / Number(this.yjTotal) * 100).toFixed(2)) : Number(Number(num / Number(this.yjTotal)).toFixed(4)))
        }
        return 0
      },
      getToday() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let str = `${year}-${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
        let startTime = str + " 00:00:00"
        let endTime = str + " 23:59:59"
        this.dateTime = [startTime, endTime]
        this.getPay({
          startTime: startTime,
          endTime: endTime
        })
        this.getTotal({
          startTime: startTime,
          endTime: endTime
        })
      },
      refreshSearch(e) {
        if (e && e.length == 2) {
          let startTime = e[0] + " 00:00:00"
          let endTime = e[1] + " 23:59:59"
          this.getPay({
            startTime: startTime,
            endTime: endTime
          })
          this.getTotal({
            startTime: startTime,
            endTime: endTime
          })
        }
      },
      // 获取总业绩
      getTotal(e) {
        this.loading1 = true
        queryTotalPerformance(e).then(res => {
          this.totalEarn = res.data || 0
          this.loading1 = false
        }).catch(err => {
          this.loading1 = false
        })
      },
      // 获取总支出
      getPay(e) {
        this.loading2 = true
        queryTotalExpenditure(e).then(res => {
          if (res.data) {
            this.qudao = res.data.qudao || 0
            this.sumFenhong = res.data.sumFenhong || 0
            this.sumTuijian = res.data.sumTuijian || 0
            this.sumTuijianyj = res.data.sumTuijianyj || 0
            this.sumYunji = res.data.sumYunji || 0
            this.totalExpenditure = res.data.totalExpenditure || 0
            this.tuoguan = res.data.tuoguan || 0
          }
          this.loading2 = false
        }).catch(err => {
          this.loading2 = false
        })
      },
      // 获取云机数量
      getYunJiNum() {
        this.loading3 = true
        this.loading4 = true
        this.loading5 = true
        this.loading6 = true
        // 总数
        queryMyYunJi().then(res => {
          this.yjTotal = res || 0
          this.loading3 = false
        }).catch(err => {
          this.loading3 = false
        })
        // 在线
        queryOnLineYunji().then(res => {
          this.yjOnLine = res || 0
          this.loading4 = false
        }).catch(err => {
          this.loading4 = false
        })
        // 准备
        queryOffLineYunji().then(res => {
          this.yjReady = res || 0
          this.loading5 = false
        }).catch(err => {
          this.loading5 = false
        })
        // 离线
        queryOffYunji().then(res => {
          this.yjOffLine = res || 0
          this.loading6 = false
        }).catch(err => {
          this.loading6 = false
        })
      },
      formatTime(e) {
        let date = new Date(e)
        // let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let str = `${month < 10 ? 0 : ''}${month}-${day < 10 ? 0 : ''}${day}`
        return str
      },
      // 获取图标数据
      getChartData() {
        this.loading7 = true
        this.loading8 = true
        // 用户等级统计
        queryUserLevelCount().then(res => {
          let obj = res.data || {
            0: 0,
            1: 1,
            2: 2,
            3: 3,
            4: 4,
          }
          let a = obj[1] || 0
          let b = obj[2] || 0
          let c = obj[3] || 0
          let d = obj[4] || 0
          this.$nextTick(() => {
            this.$refs.blockChart.init({
              dataA: a,
              dataB: b,
              dataC: c,
              dataD: d
            })
          })
          this.loading7 = false
        }).catch(err => {
          this.loading7 = false
        })
        // 订单统计
        queryOrderCount().then(res => {
          let list = res.data || []
          list = list.reverse()
          let a = []
          let b = []
          let c = []
          list.map(o => {
            a.push(this.formatTime(o.date))
            b.push(o.orderState0)
            c.push(o.orderState1)
            return o
          })
          this.$nextTick(() => {
            this.$refs.lineChart.init({
              date: a || [],
              dataA: b || [],
              dataB: c || []
            })
          })
          this.loading8 = false
        }).catch(err => {
          this.loading8 = false
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  #app .theme-picker {
    display: none;
  }
  .display-flex {
    width: 100%;
    display: flex;
    .right-1 {
      width: calc((100% - 16px) * 0.3);
      margin-right: 16px;
    }
    .right-2 {
      flex: 1 !important;
    }
    .right-3 {
      width: calc((100% - 16px) * 0.5);
      margin-right: 16px;
    }
  }
  .normal-title {
    font-size: 16px;
    font-weight: 400;
    color: #1E1E1E;
    line-height: 16px;
  }
  .normal-tip {
    font-size: 14px;
    font-weight: 400;
    color: #5E5E5E;
    line-height: 20px;
  }
  .normal-num {
    font-size: 30px;
    font-weight: 400;
    color: #383838;
    line-height: 42px;
  }
  .box-line {
    width: 100%;
    height: fit-content;
    border-right: 1px solid #F0F0F0;
  }
  .box-1 {
    display: flex;
    .box-3-1 {
      width: 32%;
      margin-right: 24px;
    }
    .box-3-2 {
      flex: 1;
      .title-box {
        width: 100%;
        display: flex;
        align-items: center;
        .right-box {
          margin-left: auto;
          border: unset;
          padding: 0;
          width: fit-content;
          height: 16px;
          ::v-deep .el-range-separator {
            font-size: 12px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 16px;
          }
          ::v-deep .el-range__icon {
            width: fit-content;
            margin-right: 5px;
            font-size: 12px;
            line-height: 16px;
            color: #8C8C8C;
          }
          ::v-deep .el-range-input {
            width: 74px;
            font-size: 12px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 16px;
            &::placeholder {
              font-size: 12px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.45);
              line-height: 16px;
            }
          }
          ::v-deep .el-range__close-icon {
            display: block;
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/new/down.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 4px;
          }
        }
      }
      .box-2 {
        width: 100%;
        display: flex;
      }
      .item-32 {
        width: 50%;
      }
    }
  }
  .box-middle {
    display: flex;
    .box-4 {
      width: calc(23.65% - 35px);
      margin-right: 35px;
    }
    .box-5 {
      flex: 1;
      display: flex;
      .chart-item {
        flex: 1;
        display: flex;
        .msg-box {
          flex: 1;
          margin-left: 16px;
          .m-tip1 {
            font-size: 14px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: #5E5E5E;
            line-height: 20px;
          }
          .m-num {
            margin-top: 14px;
            font-size: 20px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.85);
            line-height: 26px;
          }
          .m-tip2 {
            margin-top: 4px;
            font-size: 12px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 16px;
          }
        }
      }
    }
  }
  .chart-title {
    width: 100%;
    display: flex;
    align-items: center;
    .left-title {
      flex: 1;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: rgba(0,0,0,0.85);
      line-height: 22px;
    }
    .right-icon {
      width: 28px;
      height: 28px;
      background-image: url("~@/assets/new/more.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
  }
</style>
